<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>		
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<link rel="stylesheet" href="css/basic.css" type="text/css" />
		<title>ONyang EXAMPLE</title>		
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		
		<script>	
	
		
			$(document).ready(function(){	
				var menu_li_w = $(".menu li").width();		
				var menu_all_n = $(".menu li").length;
				console.log("menu_li_w : "+menu_li_w +", menu_all_n : "+menu_all_n);
				var menuarea_w = $(".nav_area").width() - $(".menu_right").width() + 20;
				var menu_n = Math.floor(menuarea_w / menu_li_w);			
				var menu_w = menu_all_n * menu_li_w;			
					
				//alert("menu_all_n : "+menu_all_n + ",menu_n : "+menu_n);
										
				if(menuarea_w > menu_w){					
					$(".menu_link").css("display","none");
						
				} else {				
						
				}	
				$(".menu_area").width(menu_n * menu_li_w);
						
			});
			
		
									 $(window).bind('resize', function(){
			var menu_li_w = $(".menu li").width();		
			var menu_all_n = $(".menu li").length;
			var menuarea_w = $(".nav_area").width() - $(".menu_right").width() + 20;
			var menu_n = Math.floor(menuarea_w / menu_li_w);			
			var menu_w = menu_all_n * menu_li_w;
			
			if(menuarea_w > menu_w){					
					$(".menu_link").css("display","none");		
				} else {				
					$(".menu_link").css("display","block");								
				}	
				$(".menu_area").width(menu_n * menu_li_w);				
		}); 
					var first_page = 1;
		function moremenu_open(){
		    var menuarea_w = document.body.clientWidth - $(".menu_right").width();
			var menu_h = $(".menu li").height();
			var menu = $(".menu li").width();
			var menu_n = Math.floor(menuarea_w / menu);
			
			//alert("媛쒖닔 : "+ menu_n+ "," + menu_left + ", first_page : "+first_page);
			
			$itemsBox = $('.menu');
							
			$itemsBox.animate(
				{'top' : '-' + menu_h * first_page + 'px' }
				,300
				,function(){				
					if(first_page == 1){
						//$(".menu").css("margin-left",menu_left);	
						$(".menu_link").html("<a href='javascript:moremenu_open()'><img src='images/main/arr_next_month.gif'></a>");
						first_page = 0;
					} else {
						//$(".menu").css("margin-left",0);
						first_page = 1;
						$(".menu_link").html("<a href='javascript:moremenu_open()'><img src='images/main/arr_last_month.gif'></a>");
					}	
				}			
			);				
		 }
				
	
		</script>		
	</head>
	<body>	
		<div id="wrap_menu">
			<!-- header start -->			
			<div id="header">
				<h1>
					<a href=""><img src="images/main/smartoffice.png" alt="HANDY Groupware" width="200" height="57"></a>
				</h1>
			<!-- nav_bar -->
			<div class="nav_area">
				<!-- menu navigation -->

				<!-- normal user menu -->
				<div class="menu_area">
				<ul id="normal_menu" class="menu">
					<li><a id="menu_0" href="">메일<span class="yellow" ></span></a></li>
					<li><a id="menu_1" href="">게시판<span class="skyblue" ></span></a></li>
					<li><a id="menu_2" href="">업무넷<span class="orange" ></span></a></li>						
					<li><a id="menu_3" href="">결재<span class="red" ></span></a></li>
					<li><a id="menu_4" href="">문서함</a></li>
					<li><a id="menu_5" href="">일정</a></li>
					<li><a id="menu_6" href="">회의</a></li>
					<li><a id="menu_7" href="">근태관리</a></li>
					<li><a id="menu_8" href="">메뉴1</a></li>
					<li><a id="menu_9" href="">메뉴2</a></li>			
					<li><a id="menu_10" href="">메뉴3</a></li>		
					<li><a id="menu_11" href="">메뉴4</a></li>		
				
					<!-- test -->
					<li><a id="menu_13">end</a></li>
					
					<!-- test -->
				</ul>
				</div>
				<!-- //normal user menu -->					
				<div class="menu_right">
					<div class="menu_link">
						<a href="javascript:moremenu_open()"><img src="images/main/arr_last_month.gif"></a>							
					</div>
					<div class="owner_info">
						<span>전략마케팅</span>
						<span>엄유정</span>						
					</div>		
					<ul class="gnb">
						<li><a href="" class="config"><span class="text">환경설정</span><span class="image"><img src="images/main/btn_config.gif"></span></a></li>
						<li><a href="" class="logout" title=""><span class="text">로그아웃</span><span class="image"><img src="images/main/btn_logout.gif"></span></a></li>
					</ul>
				</div>
			</div>
			<!-- //nav_bar -->
		</div>
			<!-- header end -->
		</div>	
	</body>
</html>

